<template>
	<resize-detector
		class="v-collapse"
		:style="cssStyle"
		:class="[
			'direction-' + direction,
			show ? '' : 'hidden',
			direction === 'y' && position === 'right'
				? 'position-right'
				: 'position-left',
			direction === 'x' && position === 'top'
				? 'position-top'
				: 'position-bottom',
		]"
		@resize="resize"
	>
		<div class="content-container">
			<slot />
		</div>

		<div class="top-right">
			<slot name="top-right"></slot>
		</div>

		<div v-if="closable" class="close" @click="setVisible(!show)">
			<i :class="['arrow', icon]"></i>
		</div>
	</resize-detector>
</template>

<script>
import resizeDetector from '../ResizeDetector';
import mixins from '../../mixins/mixins';
export default {
	name: 'collapse',
	mixins: [mixins],
	props: {
		direction: {
			type: String,
			default: 'y',
		},
		position: {
			type: String,
			default: 'left',
		},
		closable: {
			type: Boolean,
			default: true,
		},
		visible: {
			type: Boolean,
			default: true,
		},
		colStyle: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			show: this.visible,
		};
	},
	components: { resizeDetector },
	watch: {
		visible(v) {
			this.setVisible(v);
		},
	},
	computed: {
		icon() {
			const direction = { x: ['bottom', 'top'], y: ['left', 'right'] };
			const left = this.position === 'left';
			return (
				'el-icon-caret-' +
				direction[this.direction][this.show ? (left ? 0 : 1) : left ? 1 : 0]
			);
		},
		cssStyle() {
			let { foldSplitColor, foldBtnBgColor, foldBtnBorderColor, arrowColor } =
				this.colStyle || {};

			return `
      --root-split-line-color:1px solid ${foldSplitColor};
      --root-btn-color: ${foldBtnBgColor};
      --root-btn-border:1px solid ${foldBtnBorderColor};
      --root-arrow-color:${arrowColor}
      `;
		},
	},
	methods: {
		setVisible(visible) {
			if (!this.isPreview) {
				return;
			}
			this.show = visible;
			this.$emit('visible', visible);
		},
		resize(data) {
			if (this.$listeners && this.$listeners.resize) {
				this.$emit('resize', data);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.v-collapse {
	position: relative;
	background-color: transparent;

	&.hidden {
		&.direction-x {
			height: 0 !important;
			padding: 0 !important;
		}
		&.direction-y {
			width: 0 !important;
			padding: 0 !important;
		}

		.top-right {
			display: none;
		}

		.content-container {
			display: none;
		}
		&.display {
			.content-container {
				display: initial;
			}
		}
	}

	.content-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.top-right {
		position: absolute;
		right: 0;
		top: 0;
	}

	.close {
		cursor: pointer;
		position: absolute;
		z-index: 10;

		background-color: var(--root-btn-color);
		border: var(--root-btn-border);

		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background-color: #eee;
		}
	}

	&.direction-y {
		height: 100%;
		.close {
			width: 16px;
			height: 50px;
			top: 50%;
			transform: translateY(-50%);
		}
		&.position-left {
			border-right: var(--root-split-line-color);
			.close {
				border-left: 0;
				right: -16px;
			}
		}

		&.position-right {
			border-left: var(--root-split-line-color);
			.close {
				border-right: 0;
				left: -16px;
			}
		}
	}

	&.direction-x {
		width: 100%;
		.close {
			// border-bottom: 0;
			width: 50px;
			height: 16px;
			top: -17px;
			left: 50%;
			transform: translateX(-50%);
		}
		// &.position-top {
		// 	border-bottom: 1px solid #ddd;
		// 	.close {
		// 		border-top: 0;
		// 		bottom: -16px;
		// 	}
		// }

		&.position-bottom,
		&.position-top {
			border-top: var(--root-split-line-color);
			.close {
				border-bottom: 0;
				top: -16px;
			}
		}
	}
	.arrow {
		color: var(--root-arrow-color);
	}
}
</style>
